<template>
	
	<view class="information-update">
		 <navigator class="back-arrow" open-type="navigateBack">
		      <view class="arrow"></view>
		  </navigator> 
	    <text class="title">信息修改</text>
	</view>
	
	<view class="if-info">
		<text class="cancel"   @click="cancelSelection">取消</text>
		<text class="confirm">确定</text>
	</view>
	
	<view class="avatar-info">
		
			
			<view 
			      v-for="(image, index) in avatarImages" 
			      :key="index" 
			      class="avatar-item" 
			      @click="selectImage(index)"
			    >
			      <image class="avatar-img" :src="image" mode=""/>
			      <!-- 选中的圆点，默认显示白色边框，选中后填充颜色 -->
			            <view 
			              class="selected-dot" 
			              :class="{ selected: selectedIndex === index }"
			            ></view>
			    </view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

// 存储图片地址的数组
const avatarImages = ref([
  "https://q8.itc.cn/q_70/images03/20241030/7e4e379bf5b84b6c9fb4a9fec3102d5d.jpeg",
  "https://img.rongyuejiaoyu.com/uploads/20240728/02511242750.jpeg",
  "https://q9.itc.cn/q_70/images03/20241013/facec60b28dc4e46b3863bf6c41e670f.jpeg",
  "https://i2.hdslb.com/bfs/archive/422f6df22814e0f8a606f98c8bdcd7b1861f7c66.jpg",
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fd41c0adf-baf7-4f3c-a799-cbe6e8ffd60f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1743404903&t=02dfb19b02a83c49bf42c9d843b4541c",
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fed08f465-9405-427b-9da0-b83e6ca215d3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1743404903&t=880a374316d0aca5e77d8de4c80a59c7",
  "https://img2.baidu.com/it/u=185044052,4265544333&fm=253&fmt=auto&app=138&f=JPEG?w=486&h=486"
]);


// 记录当前选中的图片索引（默认未选中）
const selectedIndex = ref(null);

// 选择图片
function selectImage(index) {
  if (selectedIndex.value === index) {
    selectedIndex.value = null; // 取消选中
  } else {
    selectedIndex.value = index; // 选中新图片
  }
}

// 取消所有选中状态
function cancelSelection() {
  selectedIndex.value = null;
}



</script>


<style>

	       
		   
		   .information-update {
		     display: flex;
		     justify-content: center;
		     align-items: center; /* 调整对齐方式，让内容靠近顶部 */
		     height: 10vh;
		     background-color: #F8F8F8;
			 position: fixed; /* 固定在顶部 */
			 z-index: 1000; /* 确保在其他内容上方 */
			 top: 0;
			 left: 0;
			 width: 100%;
		   }
		   
		   .back-arrow {
		     position: relative;
		     display: flex;
		     align-items: center;
		     justify-content: center;
		     cursor: pointer;
		     left: -250rpx;
		   }
		   
		   .arrow {
		     width: 20rpx;
		     height: 20rpx;
		     border-top: 4rpx solid black;
		     border-right: 4rpx solid black;
		     transform: rotate(-135deg);
		     margin-top: 2vh;
		   }
		   
		   .title {
		     font-size: 40rpx;
		     font-weight: normal;
		     color: black;
		     margin-top: 2vh /* 向上移动标题，减少底部空间 */
		   }
		   
		   
		   /* 取消和确定按钮区域 */
		   .if-info {
		     display: flex;
		     justify-content: space-between;
		     align-items: center;
		     padding: 20rpx 40rpx;
		     font-size: 32rpx;
		     color: #333;
			 margin-top: 10vh; /* 让内容从头部下方开始 */
		   }
		   
		   /* 取消按钮（左侧） */
		   .cancel {
		     color: #999;
		   }
		   
		   /* 确定按钮（右侧） */
		   .confirm {
		     color: #007AFF; /* 微信蓝色 */
		   }
		   
		/* 头像图片区域 */
		.avatar-info {
		  display: flex;
		  flex-wrap: wrap; /* 允许换行 */
		  justify-content: flex-start; /* 确保每行的图片左对齐 */
		  padding: 20rpx;
		  background-color: #fff;
		}
		
	
		
		.avatar-item {
		  position: relative;
		  width: 220rpx;
		  height: 220rpx;
		  margin-right: 20rpx;
		  margin-bottom: 20rpx;
		  cursor: pointer;
		}
		
		.avatar-img {
		  width: 100%;
		  height: 100%;
		  border-radius: 4rpx;
		}
		
/* 默认圆点（未选中时） */
.selected-dot {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  border: 3rpx solid white;
  background-color: transparent; /* 默认透明 */
}

/* 选中状态的圆点（填充白色） */
.selected-dot.selected {
  background-color: deeppink; /* 选中后填充白色 */
  border: 3rpx solid white; /* 保持边框 */
  box-shadow: 0 0 10rpx rgba(255, 255, 255, 0.6); /* 添加半透明光晕 */
}
		
		/* 每行最多 3 张图片 */
		.avatar-info .avatar-img:nth-child(3n) {
		  margin-right: 0; /* 第三张图片不需要右边距 */
		}


		   
		   
</style>
